<!-- 已选择列表 -->
<template>
  <div>
    <a-modal
      :maskClosable="false"
      title="已选择列表"
      :bodyStyle="{ paddingBottom: '5px', paddingTop: '15px' }"
      :destroyOnClose="true"
      :footer="null"
      centered
      :width="1200"
      v-model="visible"
    >
      <div class="disFlxJS _pb-15">
        <div>
          <span
            >共<a>{{ ids[0] === 0 ? 0 : ids.length }}</a
            >人
          </span>
          <a-button
            class="_ml-10"
            type="primary"
            @click="handleDel(selectedRowKeys)"
            :disabled="!selectedRowKeys.length"
            >批量移除</a-button
          >
          <a-button class="_ml-10" type="primary" @click="handleDel()">全部移除</a-button>
        </div>
        <div>
          <a-form-model layout="inline" :model="form">
            <a-form-model-item>
              <a-input class="width-200" v-model="form.keyword" placeholder="姓名/单位/手机号/单位职务" allowClear />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="handleSearch"> 查询 </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>

      <a-card :bordered="false" :bodyStyle="{ padding: '0px' }">
        <s-table
          size="default"
          ref="table"
          rowKey="id"
          :columns="columns"
          :data="loadData"
          :rowSelection="rowSelection"
        >
          <!-- 用户信息 -->
          <template slot="userInfo" slot-scope="text, record">
            <div class="disFlxAC">
              <a-avatar v-if="record.avatar" size="default" :src="record.avatar" />
              <a-avatar v-else size="default" icon="user" />
              <div class="_pl-10">
                <div>
                  <span>{{ record.leadingName }}</span>
                </div>
                <div>{{ record.phonenumber }}</div>
              </div>
            </div>
          </template>

          <!-- 单位身份 -->
          <span slot="memberRoleType" slot-scope="text">
            <DictTag :options="Dict.getLocal('companyIdentityDict')" :value="text" isText showBorder />
          </span>

          <!-- 用户类型 -->
          <span slot="applyType" slot-scope="text">
            <DictTag :options="Dict.getLocal('applyTypeDict')" :value="text" isText showBorder />
          </span>

          <!-- 小程序登录状态 -->
          <span slot="isLogin" slot-scope="text">
            <DictTag :options="Dict.getLocal('isLoginDict')" :value="text" isText />
          </span>

          <!-- 公众号关注状态 -->
          <span slot="isOfficialAccount" slot-scope="text">
            <DictTag :options="Dict.getLocal('isOfficialAccountDict')" :value="text" isText />
          </span>

          <!-- 操作 -->
          <span slot="action" slot-scope="text, record">
            <a-button type="primary" ghost size="small" @click="handleDel([record.id])">移除</a-button>
          </span>
        </s-table>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import DictTag from '@/components/DictTag'

import { queryNotRegistration } from '@/api/activity/activity'

export default {
  components: {
    STable,
    DictTag,
  },
  data() {
    return {
      visible: false,
      columns: [
        { title: '用户', scopedSlots: { customRender: 'userInfo' }, width: 180 },
        { title: '单位', dataIndex: 'companyName', width: 180 },
        { title: '单位职务', dataIndex: 'companyPosition', width: 100 },
        { title: '单位身份', dataIndex: 'memberRoleType', width: 120, scopedSlots: { customRender: 'memberRoleType' } },
        { title: '用户类型', dataIndex: 'applyType', width: 100, scopedSlots: { customRender: 'applyType' } },
        { title: '会员职务', dataIndex: 'levelName', width: 120 },
        { title: '小程序', dataIndex: 'isLogin', width: 100, scopedSlots: { customRender: 'isLogin' } },
        {
          title: '公众号',
          dataIndex: 'isOfficialAccount',
          width: 120,
          scopedSlots: { customRender: 'isOfficialAccount' },
        },
        {
          title: '操作',
          width: '80px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      loadData: async (parameter) => {
        return queryNotRegistration(Object.assign(parameter, { ...this.form, appUserInfoIds: this.ids }))
      },
      pagination: {
        current: 1,
        pageSize: 10,
      },
      selectedRowKeys: [],
      selectedRows: [],
      form: {
        keyword: undefined,
      },
      ids: [],
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      }
    },
  },
  watch: {},
  methods: {
    moduleShow(ids) {
      this.ids = ids || []
      this.visible = true
      // this.handleSearch()
    },
    handleSearch() {
      this.$refs.table.refresh(true)
    },
    //表格数据选中
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    //移除数据
    handleDel(ids) {
      if (!ids) {
        this.$emit('del', [])
        this.ids = [0]
      } else {
        let filterIds = this.ids.filter((k) => !ids.includes(k))
        this.ids = !filterIds.length ? [0] : filterIds
        this.$emit('del', [...filterIds])
        this.selectedRowKeys = []
      }
      this.handleSearch()
    },
  },
}
</script>
<style scoped>
.btn {
  text-align: right;
}
.cancel {
  margin-right: 10px;
}
</style>
